import React, { Component } from "react";

/*
  optionalArray: PropTypes.array,
  optionalBigInt: PropTypes.bigint,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),
  requiredFunc: PropTypes.func.isRequired,
*/

// 引入PropTypes，用于检查props的数据类型
import { string, number, oneOfType } from "prop-types";

const Child1 = (props) => {
  return (
    <div>
      这是child1组件 - {props.name} - {props.age}
    </div>
  );
};
Child1.propTypes = {
  name: string,
  age: oneOfType([string, number]),
};

class Child2 extends Component {
  // static propTypes = {
  //   name: PropTypes.string,
  //   age: PropTypes.number,
  // };

  render() {
    return (
      <div>
        这是child2组件 - {this.props.name} - {this.props.age}
      </div>
    );
  }
}
Child2.propTypes = {
  name: string,
  age: number.isRequired,
};

class App extends Component {
  render() {
    return (
      <>
        <h2>props的数据类型检查</h2>
        <Child1 name="xiangge" age={18} />
        <Child2 name="laogao" />
      </>
    );
  }
}

export default App;
